/**
 * Created by zhangqi on 2015/7/28.
 * html5头像裁剪并上传插件，支持pad等移动设备
 * 调用说明：用seajs加载后，new ImgCropper(options);
 * @options.fileFormName 类型：string 带上传的图标的表单name的名称，字符串英文表示：如：file
 * @options.url 类型 string 上传接口url
 * @options.params 类型：Object 上传附带的参数对象
 * @options.headers 类型 Object 上传请求头的附加信息
 * @options.callback 类型：function(data), return 成功服务端返回的数据
 */


    require("./imgCropper.css");
    //图片裁剪插件
    require("./cropper.min.css");
    require("./cropper.min");
    //标准弹框插件
    require("../../plugins/artDialog/ui-dialog.css");
    require("../../plugins/artDialog/dialog-plus");
    require("../../plugins/jquery.loading"); //loading插件
    require("../../plugins/layer/layer");
var ImgCropper = function(){
  this.init.apply(this,arguments);
};

ImgCropper.prototype = {
  constructor:ImgCropper,
  defaultOptions:{
    callback:undefined //上传成功之后的回调
  },
  init:function(options){
    this.options = $.extend({},this.defaultOptions,options);
    this.initDialog();
  },
  initDialog:function(){
    var t = this;
    var _html ='' +
      '<div id="base_avatar_upload" class="clearfix">' +
      '   <!--上传文件按钮-->' +
      '   <div id="base_upload_btn_wrap"> ' +
      '       <button id="base_upload_btn_select">选择图片文件</button>' +
      '       <input type="file" id="base_upload_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp"  /> ' +
      '   </div>' +
      '   <!--上传图片容器-->' +
      '   <div id="base_upload_action_wrap">' +
      '       <div id="base_upload_img_wrap"></div>' +
      '       <div id="base_upload_preview" style=""></div>' +
      '       <div id="base_upload_btns">' +
      '           <span class="icon icon-zoom-in"></span>' +
      '           <span class="icon icon-zoom-out"></span>' +
      '           <span class="icon icon-rotate-left"></span>' +
      '           <span class="icon icon-rotate-right"></span>' +
      '       </div>' +
      '   </div>' +
      '</div>';
    t.dialog = dialog({
      title:"头像裁剪"
      ,ok:function(){
        //如果不支持html5文件接口则不处理
        if(typeof FileReader !== "function"){
          return false;
        }
        var $image = $("#base_img_crop");
        var oCanvas = $image.cropper('getCroppedCanvas', {
          width: 160,
          height: 160
        });

        if(typeof oCanvas.toDataURL == "function"){
          var data=oCanvas.toDataURL();
          // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
          data=data.split(',')[1];
          data=window.atob(data);
          var ia = new Uint8Array(data.length);
          for (var i = 0; i < data.length; i++) {
            ia[i] = data.charCodeAt(i);
          };

          // canvas.toDataURL 返回的默认格式就是 image/png
          var blob=new Blob([ia], {type:"image/png"});

          var formData = new FormData();
          formData.append(t.options.fileFormName, blob);
          if(!$.isEmptyObject(t.options.params)){
            for(var i in t.options.params){
              formData.append(i, t.options.params[i]);
            }
          }
          var oAjaxOpt = {
            url: t.options.url,
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            beforeSend:function(){
              $("#base_avatar_upload").loading(); //启用遮罩
            },
            success: function (data) {
              typeof t.options.callback == "function" && t.options.callback(data);
              t.dialog.close().remove();
            },
            error: function () {
              layer.msg("上传失败，请重试", {offset: 0,shift:6});
            },
            complete:function(){
              $("#base_avatar_upload").loading({state:false}); //关闭遮罩
            }
          };
          if(t.options.headers && !$.isEmptyObject(t.options.headers)){
            oAjaxOpt.headers = t.options.headers;
          }
          $.ajax(oAjaxOpt);
        }

        return false;
      }
      ,cancel:function(){}
      ,content:_html
    }).showModal();
    t.bindEvent();
  },
  //格式验证
  fileCheck:function(str){
    if (str == "") {
      layer.msg("请上传图片", {offset: 0,shift:6});
      return false;
    } else if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(str)) {
      layer.msg("图片类型必须是.gif,jpeg,jpg,png中的一种", {offset: 0,shift:6});
      str = "";
      return false;
    }
    return true;
  },
  bindEvent:function(){
    var t = this;

    //浏览器支持判断
    if(typeof FileReader !== "function"){
      var $wrap = $('<div class="notsupport">系统检测到您的浏览器不支持该功能，请更换浏览器使用该功能，推荐使用chrome浏览器、FireFox浏览器、360浏览器（极速模式）、QQ浏览器（极速模式）</div>');
      $("#base_upload_btn_wrap").append($wrap);
    }

    var $image;
    $("#base_upload_file").change(function(){
      if(!t.fileCheck($(this).val())){
        $(this).val("");
        return false;
      }
      var reader = new FileReader();
      var oFile = $("#base_upload_file")[0].files[0];
      //图片文件文件不能大于2MB
      if(oFile.size > 2*1024*1024){
        layer.msg("文件大小不能超过2M", {offset: 0,shift:6});
        $(this).val("");
        return false;
      }
      reader.readAsDataURL(oFile);

      $("#base_upload_btn_wrap").hide(); //隐藏上传按钮
      $("#base_upload_action_wrap").show(); //显示裁剪容器
      reader.onload = function (e) {
        var url = e.target.result;
        var image=new Image();
        image.src=url;
        image.id = "base_img_crop";
        $("#base_upload_img_wrap").append(image);
        $image = $("#base_img_crop");

        $image.cropper({
          aspectRatio: 1 / 1,
          preview: '#base_upload_preview'
        });

      }


    });
    //放大
    $("#base_upload_btns").find(".icon-zoom-in").click(function(){
      $image.cropper("zoom", 0.1);
    });
    //缩小
    $("#base_upload_btns").find(".icon-zoom-out").click(function(){
      $image.cropper("zoom", -0.1);
    });
    //左旋转
    $("#base_upload_btns").find(".icon-rotate-left").click(function(){
      $image.cropper("rotate", -45);
    });
    //右旋转
    $("#base_upload_btns").find(".icon-rotate-right").click(function(){
      $image.cropper("rotate", 45);
    });
  }
};

    module.exports = ImgCropper;

